<html>
  <head>
    <meta charset="utf-8" />
    <title>SVG-TEXT-ANI</title>
    <style>
      html {
        --dash-length: 350;
      }

      svg {
        width: 80vw;
        height: 45vw;
      }

      text {
        fill: transparent;
      }

      .small {
        font: italic 100px sans-serif;
      }

      .stroke-ani {
        stroke: red;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
        stroke-dasharray: var(--dash-length);
        stroke-dashoffset: var(--dash-length);
        animation: stroke-move-1 3.5s ease 0.5s infinite alternate;
      }

      .stroke-ani-2 {
        stroke: blue;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 3;
        stroke-dasharray: var(--dash-length);
        stroke-dashoffset: var(--dash-length);
        animation: stroke-move-2 3.5s ease 0.5s infinite alternate;
      }

      .stroke-ani-3 {
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 4;
        stroke-dasharray: var(--dash-length);
        stroke-dashoffset: var(--dash-length);
        animation: stroke-move-3 3.5s ease-in-out 0.5s infinite alternate;
      }

      @keyframes stroke-move-1 {
        from {
          stroke-dashoffset: var(--dash-length);
        }

        to {
          stroke-dashoffset: 0;
        }
      }

      @keyframes stroke-move-2 {
        0%,
        10% {
          stroke-dashoffset: var(--dash-length);
        }

        90%,
        100% {
          stroke-dashoffset: 0;
        }
      }

      @keyframes stroke-move-3 {
        0%,
        20% {
          stroke-dashoffset: var(--dash-length);
        }

        80%,
        100% {
          stroke-dashoffset: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="page">
      <svg viewBox="0 0 480 270" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="myGradient">
            <stop offset="0%" stop-color="green" />
            <stop offset="100%" stop-color="rgba(240,100,10,100)" />
          </linearGradient>
        </defs>

        <text x="20" y="100" class="small stroke-ani">superzdd</text>
        <text x="20" y="100" class="small stroke-ani-2">superzdd</text>
        <text
          x="20"
          y="100"
          class="small stroke-ani-3"
          stroke="url(#myGradient)"
        >
          superzdd
        </text>
      </svg>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo soluta
        enim incidunt hic doloribus, cupiditate, amet eos molestias aut repellat
        iste cumque deleniti quisquam accusantium perspiciatis fugit
        voluptatibus officia nisi.
      </p>
    </div>
  </body>
</html>
